import React, { Component } from 'react'

import { connect } from 'react-redux'
import { add, minus, asyncMinus, asyncSetName } from '../store/actionCreator'

import * as actionCreators from '../store/actionCreator'
import { bindActionCreators } from 'redux'
class Brother1 extends Component {

  state = {
    name: ''
  }

  addClick = () => {
    this.props.add(3)
  }

  minusClick = () => {
   this.props.minus(2)
  }

  sure = () => {
    this.props.asyncSetName(this.state.name)
  }

  render() {
    return (
      <div>
        Brother1
        <br/>
        <br/>
        <br/>
        <button onClick={this.addClick}>+</button>&nbsp;&nbsp;&nbsp;
        <button onClick={this.minusClick}>-</button>
        <br/>
        <br/>
        <br/>
        <input
          type="text"
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value})}/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button onClick={this.sure}>确定</button>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  // 这个返回的对象是作为Borther1的 props
  // return {
  //   addNum: function (num) {
  //     dispatch(add(num))
  //   },
  //   minusNum (num) {
  //     dispatch(asyncMinus(num))
  //   },
  //   setName (name) {
  //     dispatch(asyncSetName(name))
  //   }
  // }

  // 第一种简写方式,直接bindActionCreators方法把动作创建者和分发绑定，自动分发
  // return bindActionCreators(actionCreators, dispatch)
}

// 为了降低仓库和react组件的强耦合，用react-redux处理
// export default connect(null, mapDispatchToProps)(Brother1)

// 第二种简写方式，直接把动作解构出来用，不需要手动分发了，但是必须保证动作名要与store/actionCreator.js里的动作名一样
export default connect(null, { add, minus, asyncSetName })(Brother1)